<!DOCTYPE html>
<html
	class="pixel-ratio-3 retina ios ios-9 ios-9-1 ios-gt-8 ios-gt-7 ios-gt-6">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">

/*分辨率高于1440，采用下面的样式*/
@media screen and (max-device-width: 1441px) {
	body {
		font-size: 32px;
	}
}
/*分辨率低于1280，采用下面的样式*/
@media screen and (max-device-width:1080px) {
	body {
		font-size: 26px;
	}
}
/*分辨率低于1280，采用下面的样式*/
@media screen and (max-device-width:1280px) {
	body {
		font-size: 20px;
	}
}
/*分辨率低于1280，采用下面的样式*/
@media screen and (max-device-width:750px) {
	body {
		font-size: 14px;
	}
}
html,body,div{
	width:100%;
    height:100%;
	margin:0px;
	padding:0px;
	text-align: center;
}
img{
	width:100%;
    height:100%;
}
table{
	margin:0 auto;
	width: 100%;
	color: white;
	font-size: 1.5em;
	text-align: left;
	border-spacing:3em 1em;
	padding:0% 0% 0% 8%;
}
button{
	padding: 15px;
}
</style>
</head>
<body>
	<div>
		<div>
			<img src="bg.png" >
		</div>
		<div>
			<div style="position:absolute;top:5em;">
				<table>					
					<tr>
						<td>运行状态：<span id="ERR">-</span></td>
						<td></td>
					</tr>
					<tr>
						<td>运行时间：<span id="Time">-</span> 秒</td>
						<td></td>
					</tr>
					<tr>
						<td>上报时间：<span id="Utime">-</span></td>
						<td></td>
					</tr>
					<tr><td></td><td></td></tr>
					<tr>
						<td>棚内温度：<span id="Tem">-</span> ℃</td>
						<td>二氧化碳浓度：<span id="CO2">-</span> ppm</td>
					</tr>
					<tr>
						<td>棚内湿度：<span id="Hum">-</span> RH</td>
						<td>土壤湿度：<span id="SoidHum">-</span> RH</td>
					</tr>
					
					<tr>
						<td>光照强度：<span id="Light">-</span> Lux</td>
						<td></td>
					</tr>
				</table>
			</div>
			<div style="position:absolute;top:65em;">
				<p style="text-align: right;padding:0% 8% 0% 0%;"><button onclick="go(-1)">上一页</button>&nbsp;&nbsp;<button onclick="go(1)">下一页</button></p>
				<table id="history" style="padding:0px;">	
					<thead>
						<tr>
							<th>运行状态</th>
							<th>运行时间</th>
							<th>上报时间</th>
							<th>棚内温度</th>
							<th>CO2浓度</th>
							<th>棚内湿度</th>
							<th>土壤湿度</th>
							<th>光照强度</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<script>
		var ERR_State = ["正常","棚内温度过高","棚内湿度过高","土壤湿度过高","光照过强","二氧化碳浓度过高","棚内温度过低","棚内湿度过低","土壤湿度过低","光照过低","二氧化碳浓度过低"];
		var page = 0;
		var limit = 6;
		function go(index){
			page += index;
			page = page < 0 ? 0 : page;
			ws.send(`{"page":${page},"limit":${limit}}`);
		}
		function dateFormat(fmt, date) {
			var ret;
			const opt = {
				"Y+": date.getFullYear().toString(),        // 年
				"m+": (date.getMonth() + 1).toString(),     // 月
				"d+": date.getDate().toString(),            // 日
				"H+": date.getHours().toString(),           // 时
				"M+": date.getMinutes().toString(),         // 分
				"S+": date.getSeconds().toString()          // 秒
				// 有其他格式化字符需求可以继续添加，必须转化成字符串
			};
			for (k in opt) {
				ret = new RegExp("(" + k + ")").exec(fmt);
				if (ret) {
					fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
				};
			};
			return fmt;
		}
		if ("WebSocket" in window){		   
		   // 打开一个 web socket
		   //var ws = new WebSocket("ws://lcsan.wicp.net/");
           var ws = new WebSocket("ws://d38692f252.wicp.vip/");
			
		   ws.onopen = function()
		   {
			  // Web Socket 已连接上，使用 send() 方法发送数据
			  //ws.send('{"page":0,"limit":1}');
			  ws.send('{"page":0,"limit":6}');
		   };
			
		   ws.onmessage = function (evt) 
		   {
				try{
					data = JSON.parse(evt.data);
					if(data){
						if(data.constructor == Object){
							for(k in data){
								if(k == "id"){
									continue;
								}
								if(k == "Utime"){
									document.querySelector("#"+k).innerText = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data[k]));
									continue;
								}else if(k == "ERR"){
									document.querySelector("#"+k).innerText = ERR_State[data[k]];
									continue;
								}
								document.querySelector("#"+k).innerText = data[k];
							}
							page = 0;
							ws.send(`{"page":${page},"limit":${limit}}`);
						}else if(data.constructor == Array){
							str = ""
							
							for(dt in data){
								str += "<tr>"
								str += `<td width="10%">${ERR_State[data[dt]["ERR"]]}</td>`
								str += `<td width="10%">${data[dt]["Time"]}</td>`
								str += `<td width="10%">${dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data[dt]["Utime"]))}</td>`
								str += `<td width="10%">${data[dt]["Tem"]}</td>`
								str += `<td width="10%">${data[dt]["CO2"]}</td>`
								str += `<td width="10%">${data[dt]["Hum"]}</td>`
								str += `<td width="10%">${data[dt]["SoidHum"]}</td>`
								str += `<td width="10%">${data[dt]["Light"]}</td>`
								str += "</tr>"
							}
							document.querySelector("#history>tbody").innerHTML = str;
						}
					}
				} catch(err) {
				   console.log(err);
				}
			
		   };
			
		   ws.onclose = function(){  
		   };
		}else
		{
		   // 浏览器不支持 WebSocket
		   alert("您的浏览器不支持 WebSocket!");
		}
	</script>
</body>
</html>

